<template>
  <div>
      <!-- 容器 -->
      <div class="box">
          <div>
              <div>上</div>
              <div class="mt15">下</div>
          </div>
           <div>
              <div>上</div>
              <div class="mt15">下</div>
          </div>
           <div>
              <div>上</div>
              <div class="mt15">下</div>
          </div>
           <div>
              <div>上</div>
              <div class="mt15">下</div>
          </div>
           <div>
              <div>上</div>
              <div class="mt15">下</div>
          </div>
         
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 1230px;
    height: 615px;
    border: 2px solid red;
    display: flex;
    justify-content: space-between; 
}
.box div{
    width: 234px;
    height: 615px;
    background: #000;
}
.box div div{
    width: 234px;
    height: 300px;
    background: yellow;
}
.mt15{
    margin-top: 15px;
}
</style>